<template>
<div class="app-container" style="padding: 20px;">
    <el-form :model="queryParam" ref="queryForm" :inline="true" style="margin-bottom: 20px;" >
        <el-form-item label="题目标题：" style="margin-left:10px" >
            <el-input v-model="queryParam.questionName" placeholder="请输入题目名称"  clearable></el-input>
        </el-form-item>
        <el-form-item label="题型：" style="margin-left:20px">
            <el-select v-model="queryParam.questionType" clearable placeholder="请选择题型">
                <el-option
                v-for="item in questionEnum"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="学科：" style="margin-left:10px">
            <el-select v-model="queryParam.subjectIds" placeholder="请选择科目" multiple remote reserve-keyword filterable
            :remote-method="getSubjectName"    >
            <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="submitForm" icon="el-icon-search" round>查询</el-button>
            <el-button type="danger" @click="handleDel" icon="el-icon-delete" round>批量删除</el-button>
    </el-form-item>
    </el-form>
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%; " ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>  
        <el-table-column prop="subjectName"  align="center" label="学科" width="120px"  />
        <el-table-column prop="questionType"  align="center" label="题型" width="120px" :formatter="questionTypeFormat" />
        <el-table-column prop="questionName"   align="center" label="题干" />
        <el-table-column prop="questionScore"  align="center" label="分数" width="60px" />
        <el-table-column prop="username"  align="center" label="创建人" width="160px"/>
        <el-table-column prop="createTime"  align="center" label="创建时间" width="160px"/>
        <el-table-column
        align="center"
        label="操作"
        >
        <template slot-scope="scope">
            <el-button  class="el-btn"  size="mini" @click="show(scope.row)" style="margin-right:5px">预览</el-button>
            <router-link :to="{path: getRoutePath(scope.row) , query:{id: scope.row.id,msg:'edit'}}" class="link-left">
                <el-button  class="el-btn" type="primary" size="mini">编辑</el-button>
            </router-link>
            <el-button class="el-btn"  type="danger" size="mini" @click="handleDel(scope.row)" style="margin-left:5px">删除</el-button>
        </template>
    </el-table-column>
    </el-table>
    <el-pagination
            style="textAlign:center;margin-top: 20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!-- 预览的界面 -->
    <el-dialog title="题目预览" width="60%" :visible="dialogVisible" :before-close="closeDialog" style="padding: 0px;">
        <el-form :model="preview">
            <el-form-item label="">
            <p v-html="preview.questionName"></p>
            </el-form-item>
            <!-- 如果是选择题 -->
            <div v-show="preview.questionType == 1 || preview.questionType == 2" >
                <div>A：<p class="answer-item" v-html="preview.answerA"></p></div>
                <div>B：<p class="answer-item" v-html="preview.answerB"></p></div>
                <div>C：<p class="answer-item" v-html="preview.answerC"></p></div>
                <div>D：<p class="answer-item" v-html="preview.answerD"></p></div>
            </div>
            <!-- 如果是判断题 -->
            <div v-show="preview.questionType == 3">
                <p><span style="margin-left:40px">A 正确</span> <span style="margin-left:60px">B 错误</span></p>
            </div>
        </el-form>
    </el-dialog>
    </div>
</template>

<script>
import {pagesList,delByIds,previewQuestion} from '@/api/question/question'
import {getSubjectName} from'@/api/subject/subject'
export default {
    name:'QuestionList',
    data () {
    return {
        queryParam: {
            questionName: null,
            questionType: null,
            subjectIds:[],
            pageIndex: 1,
            pageSize: 10,
            deleted: false
        },
        listLoading: false,
        tableData: [],
        removeIds:[],
        total: 0,
        questionEnum:[
            {key:1,value:"单选题"},
            {key:2,value:"多选题"},
            {key:3,value:"判断题"},
            {key:4,value:"简答题"}
        ],
        options:[],
        // 预览
        preview:{
            questionType:null,
            questionName:'',
            questionScore:null,
            answerA:'',
            answerB:'',
            answerC:'',
            answerD:''
        },
        dialogVisible: false,
        selectLoading: false,
        }
    },
    mounted () {
        this.search();
    },
    methods: {
        // 查询
    async search () {
            let res = await pagesList(this.queryParam);
            if(res.code == 200){
                this.tableData = res.data.records;
                this.total = res.data.total;
                // this.$message.success(res.message);
            }
        },
        getSubjectName(val){
            if(val.trim() != ''){
                getSubjectName(val).then(resp =>{
                    this.options = resp.data;
                })
            }
        },
        handleSelectionChange(val){
            this.removeIds = [];
            val.forEach(item => {
                this.removeIds.push(item.id);
            });
        }, 
        submitForm () {
            this.search();
        },
        // 预览相关
        show(row){
            this.dialogVisible = true;
            previewQuestion(row.id).then(resp=>{
                this.preview.questionType = resp.data.questionType;
                this.preview.questionName = resp.data.questionName;
                this.preview.questionScore = resp.data.questionScore;
                this.preview.answerA = resp.data.answerA;
                this.preview.answerB = resp.data.answerB;
                this.preview.answerC = resp.data.answerC;
                this.preview.answerD = resp.data.answerD;
                console.log(this.preview);
            })
        },
        closeDialog(){
            this.dialogVisible = false;
                this.preview.questionType = null;
                this.preview.questionName = '';
                this.preview.questionScore = null;
                this.preview.answerA = '',
                this.preview.answerB = '',
                this.preview.answerC = '',
                this.preview.answerD = ''
        },
        // 删除相关
        handleDel(row){
            let arr =[];
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    if(row.id){
                        arr.push(row.id)
                        this.dels(arr)
                    }else{
                        if(this.removeIds.length <= 0){
                            this.$message('请选择要删除的选项')
                        }else{
                            this.dels(this.removeIds)
                        }
                    }
                    this.search();
                }).catch(() =>{
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });  
                })
        },
        dels(val){
            delByIds(val).then(resp =>{
                if(resp.code){
                    // this.$message.success(resp.message);
                    this.search();
                }else{
                    this.$message.error(resp.message);
                    this.search();
                }
            })
        },
        // 分页相关
        handleSizeChange(val) {
            this.queryParam.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryParam.pageIndex = val;
            this.search();
        },

        questionTypeFormat(row, column, cellValue, index){
            let name = '';
            this.questionEnum.forEach(i =>{
                if(i.key == cellValue){
                    name = i.value;
                    return;
                }
            })
            return name;
        },
        // 路由路径选择
        getRoutePath(row){
            switch(row.questionType){
                case 1:
                    return '/question/singleQuestion';
                case 2:
                    return '/question/mutilQuestion';
                case 3:
                    return '/question/judgeQuestion';
                case 4:
                    return '/question/writtenQuestion';
            }
        }
    }
}
</script>

<style scoped lang="css">
*{
    margin: 0px;
    padding: 0px;
}
    .el-dialog__body{
        padding: 0px 20px 30px !important;
    }

    .answer-item{
        display: inline-block;
    }

    .el-btn{
        height: 28px;
        width: 56px;
    }


</style>